* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100vw;
  height: 100vh;
  // background-color: darkgreen;
}
input {
  display: block;
}
#add {
  width: 100%;
  height: 100%;
  // background-color: darkmagenta;
  display: flex;
  flex-direction: column;
  header {
    background-color: darkolivegreen;
    height: 2rem;
    font-size: 1.5rem;
    line-height: 2rem;
    text-align: center;
  }
  main {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    aside {
      margin-top: 2rem;
      width: 12rem;
      display: flex;
      flex-direction: row-reverse;
      margin-right: 10%;
      // justify-content: center;
      // background-color: darksalmon;
      span {
        color: darkred;
        font-size: 0.1rem;
      }
      p {
        font-size: 0.2rem;
      }
      input {
        width: 7rem;
        height: 1rem;
        font-size: 0.2rem;
      }
    }
    article {
      margin-top: 2rem;
      input {
        background-color: deeppink;
        width: 5rem;
        height: 2rem;
        border-radius: 0.5rem;
      }
    }
  }
  footer {
    height: 2rem;
    background-color: darkorchid;
    line-height: 2rem;
    font-size: 0.6rem;
    text-align: center;
  }
}
